<template>
	<Tabbar v-model="active" :fixed="true" v-if="showApp != '1' && show">
		<Tab-item class="footer_nav" id="index" @click.native="$router.replace({name: 'index'})">
			<div class='index footer_nav_img'></div>
			<span>新品体验</span>
		</Tab-item>
		<Tab-item class="footer_nav product" id="ordering" @click.native="$router.replace({name: 'ordering'})">
			<div class='product footer_nav_img'></div>
			<span>新品预售</span>
		</Tab-item>
		<Tab-item class="footer_nav shopping" id="shopping" @click.native="$router.replace({name: 'shopping'})">
			<div class='shopping footer_nav_img'></div>
			<span>购物车</span>
		</Tab-item>
		<Tab-item class="footer_nav member" id="member" @click.native="$router.replace({name: 'member'})">
			<div class='member footer_nav_img'></div>
			<span>个人中心</span>
		</Tab-item>
	</Tabbar>
</template>

<script>
	import { Tabbar, TabItem } from 'mint-ui';
	export default {
		// name:'Tabbar',
		components: {
			Tabbar,
			TabItem
		},
		data()
		{
			return {
				active  : 'index',
				show    :  false,
				showApp :  window.sessionStorage.getItem('isapp'),
			}
		},
		created()
		{
			if(this.$route.query.isapp == "1")
			{
				this.show = false;
			}
		},
		watch: {
			'$route'(value)
            {
            	this.active = value.name;
        		switch (value.name)
                {
                	case 'index':
                	case 'ordering':
                	case 'shopping':
                	case 'member':
                		this.show = true;
                		if(this.showApp == "1" || !this.show)
						{
							this.show = false;
						}
                		break;

                	default:
                		this.show = false;
                		break;
                }
            }
		}
	}
</script>

<style lang="less">
	.is-selected .index{
		background-image: url("../assets/index-hover.png") !important;
	}
	.is-selected .product{
		background-image: url("../assets/product-hover.png") !important;
	}
	.is-selected .shopping{
		background-image: url("../assets/shopping_cart-hover.png") !important;
	}
	.is-selected .member{
		background-image: url("../assets/member-hover.png") !important;
	}
	.is-selected{
		background-color: initial !important;
		color:#333 !important;
	}
	.footer_nav{
		.index{
			background-image: url("../assets/index.png");
			
		}
		.product{
			background-image: url("../assets/product.png");
		}
		.shopping{
			background-image: url("../assets/shopping_cart.png");
			
		}
		.member{
			background-image: url("../assets/member.png");
			
		}
		.footer_nav_img{
			text-align: center;
			width: 50/28rem;
			height: 50/28rem;
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100%;
			margin-right: auto;
			margin-left: auto;
			margin-bottom: 12/28rem;
		}
		span{
			font-size: 22/28rem;
		}
	}
	.is-fixed{
		background-color: #fff;
    	border-top: 1px solid #f5f5f5;
	}
</style>